/*
    创建者：shuxiaokai
    创建时间：2021-09-24 22:25
    模块名称：导出文档
    备注：
*/
<template>
  <div class="doc-export">
    <s-fieldset :title="$t('导出类型')">
      <div class="download-wrap">
        <div class="item" :class="{active: selectedType === 'html'}" @click="selectedType = 'html'">
          <svg class="svg-icon" aria-hidden="true">
            <use xlink:href="#iconhtml"></use>
          </svg>
          <div class="mt-1">HTML</div>
        </div>
        <!-- <div class="item" :class="{active: selectedType === 'pdf'}" @click="selectedType = 'pdf'">
                    <svg class="svg-icon" aria-hidden="true">
                        <use xlink:href="#iconpdfwenjian"></use>
                    </svg>
                    <div class="mt-1">PDF</div>
                </div> -->
        <div class="item" :class="{active: selectedType === 'word'}" @click="selectedType = 'word'">
          <svg class="svg-icon" aria-hidden="true">
            <use xlink:href="#iconWORD"></use>
          </svg>
          <div class="mt-1">WORD</div>
        </div>
        <div class="item" :class="{active: selectedType === 'moyu'}" @click="selectedType = 'moyu'">
          <img src="@/assets/imgs/logo.png" alt="moyu" class="img">
          <div class="mt-1">{{ $t('JSON文档') }}</div>
        </div>
        <div class="item" :class="{active: selectedType === 'otherProject'}" @click="selectedType = 'otherProject'">
          <svg class="svg-icon" aria-hidden="true">
            <use xlink:href="#icondaochu1"></use>
          </svg>
          <div class="mt-1">{{ $t("导出到其他项目") }}</div>
        </div>
      </div>
    </s-fieldset>
    <s-fieldset v-if="selectedType !== 'otherProject'" :title="$t('额外配置')">
      <s-config ref="config" label="选择导出" :description="$t('开启后可以自由选择需要导出的文档')">
        <template #default="prop">
          <div v-if="prop.enabled" class="doc-nav">
            <div>
              <span>{{ $t("总数") }}：</span>
              <span>{{ allCheckedNodes.length }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ $t("文件夹数量") }}：</span>
              <span>{{ allCheckedNodes.filter(node => node.isFolder).length }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ $t("文档数量") }}：</span>
              <span>{{ allCheckedNodes.filter(node => !node.isFolder).length }}</span>
            </div>
            <el-divider></el-divider>
            <el-tree
              ref="docTree"
              :data="bannerData"
              node-key="_id"
              show-checkbox
              :expand-on-click-node="true"
              @check-change="handleCheckChange"
            >
              <template #default="scope">
                <div
                  class="custom-tree-node"
                  tabindex="0"
                >
                  <!-- file渲染 -->
                  <template v-if="!scope.data.isFolder">
                    <template v-for="(req) in projectInfo.rules.requestMethods">
                      <span v-if="scope.data.method.toLowerCase() === req.value.toLowerCase()" :key="req.name" class="file-icon" :style="{color: req.iconColor}">{{ req.name }}</span>
                    </template>
                    <div class="node-label-wrap">
                      <s-emphasize class="node-top" :title="scope.data.name" :value="scope.data.name"></s-emphasize>
                    </div>
                  </template>
                  <!-- 文件夹渲染 -->
                  <template v-if="scope.data.isFolder">
                    <i class="iconfont folder-icon iconweibiaoti-_huabanfuben"></i>
                    <div class="node-label-wrap">
                      <s-emphasize class="node-top" :title="scope.data.name" :value="scope.data.name"></s-emphasize>
                    </div>
                  </template>
                </div>
              </template>
            </el-tree>
          </div>
        </template>
      </s-config>
      <div class="d-flex j-center mt-2">
        <el-button :loading="loading" type="primary" @click="handleExport">{{ $t("确定导出") }}</el-button>
      </div>
    </s-fieldset>
    <s-fork v-else></s-fork>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { ref, Ref, computed } from 'vue'
import { TreeNodeOptions } from 'element-plus/lib/components/tree/src/tree.type'
import { ApidocBanner } from '@@/global';
import { store } from '@/store/index'
import { axios } from '@/api/api'
import { router } from '@/router/index'
import { $t } from '@/i18n/i18n'
import sFork from './fork/fork.vue'

//可导出数据类型
const selectedType: Ref<'html' | 'pdf' | 'word' | 'moyu' | 'otherProject'> = ref('html')
//项目基本信息
const projectInfo = computed(() => store.state['apidoc/baseInfo']);
//菜单数据
const bannerData = computed(() => store.state['apidoc/banner'].banner)
//当前选中节点
const allCheckedNodes: Ref<ApidocBanner[]> = ref([]);
//节点选中
const docTree: Ref<TreeNodeOptions['store'] | null> = ref(null);
const handleCheckChange = () => {
  const checkedNodes = docTree.value?.getCheckedNodes() || [];
  const halfCheckedNodes = docTree.value?.getHalfCheckedNodes() || [];
  allCheckedNodes.value = checkedNodes.concat(halfCheckedNodes) as ApidocBanner[];
}

//=====================================导出操作====================================//
//数据加载状态
const loading = ref(false);
const config: Ref<{ enabled: boolean } | null> = ref(null)
//导出为html
const handleExportAsHTML = () => {
  const selectedIds = allCheckedNodes.value.map((val) => val._id);
  loading.value = true;
  const params = {
    projectId: router.currentRoute.value.query.id,
    selectedNodes: selectedIds,
  };
  axios.request({
    method: 'post',
    url: '/api/project/export/html',
    responseType: 'blob',
    data: params,
  }).catch((err) => {
    console.error(err);
  }).finally(() => {
    loading.value = false;
  });
}
//导出为moyu文档
const handleExportAsMoyu = () => {
  const selectedIds = allCheckedNodes.value.map((val) => val._id);
  loading.value = true;
  const params = {
    projectId: router.currentRoute.value.query.id,
    selectedNodes: selectedIds,
  };
  axios.request({
    method: 'post',
    url: '/api/project/export/moyu',
    responseType: 'blob',
    data: params,
  }).catch((err) => {
    console.error(err);
  }).finally(() => {
    loading.value = false;
  });
}
//导出为pdf文档
const handleExportAsPdf = () => {
  const selectedIds = allCheckedNodes.value.map((val) => val._id);
  loading.value = true;
  const params = {
    projectId: router.currentRoute.value.query.id,
    selectedNodes: selectedIds,
  };
  axios.request({
    method: 'post',
    url: '/api/project/export/pdf',
    responseType: 'blob',
    data: params,
  }).catch((err) => {
    console.error(err);
  }).finally(() => {
    loading.value = false;
  });
}
//导出为word
const handleExportAsWord = () => {
  const selectedIds = allCheckedNodes.value.map((val) => val._id);
  loading.value = true;
  const params = {
    projectId: router.currentRoute.value.query.id,
    selectedNodes: selectedIds,
  };
  axios.request({
    method: 'post',
    url: '/api/project/export/word',
    responseType: 'blob',
    data: params,
  }).catch((err) => {
    console.error(err);
  }).finally(() => {
    loading.value = false;
  });
}
const handleExport = () => {
  const enableCustomExport = config.value?.enabled;
  const customExportIsEmpty = allCheckedNodes.value.length === 0;
  if (enableCustomExport && customExportIsEmpty) { //允许自定义导出并且数据为空
    ElMessage.warning($t('请至少选择一个文档导出'));
    return;
  }
  if (selectedType.value === 'html') {
    handleExportAsHTML();
  } else if (selectedType.value === 'moyu') {
    handleExportAsMoyu();
  } else if (selectedType.value === 'pdf') {
    handleExportAsPdf();
  } else if (selectedType.value === 'word') {
    handleExportAsWord();
  } else { //默认兜底导出html
    handleExportAsHTML();
  }
}
</script>

<style lang="scss">
.doc-export {
    overflow-y: auto;
    height: calc(100vh - #{size(100)});
    width: 70%;
    min-width: size(768);
    margin: 0 auto;
    .download-wrap {
        display: flex;
        .item {
            width: size(130);
            height: size(100);
            padding: size(10);
            margin-right: size(20);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border: 1px solid transparent;
            &.active {
                border: 1px solid $gray-400;
                box-shadow: $box-shadow-sm;
            }
            &:hover {
                border: 1px solid $gray-400;
            }
            .svg-icon {
                width: size(70);
                height: size(70);
            }
            .img {
                width: size(60);
                height: size(60);
            }
        }
    }
    .doc-nav {
        .custom-tree-node {
           display: flex;
            align-items: center;
            width: 100%;
            overflow: hidden;
            height: size(30);
            &:hover {
                .more {
                    display: block;
                }
            }
            .file-icon {
                font-size: fz(14);
                margin-right: size(5);
            }
            .folder-icon {
                color: $yellow;
                flex: 0 0 auto;
                width: size(16);
                height: size(16);
                margin-right: size(5);
            }
            .node-label-wrap {
                display: flex;
                flex-direction: column;
                flex: 1;
                overflow: hidden;
                .node-top {
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .node-bottom {
                    color: $gray-500;
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
        .el-tree-node__content {
            height: size(30);
            display: flex;
            align-items: center;
        }
        .el-tree-node__content>.el-tree-node__expand-icon {
            transition: none; //去除所有动画
            padding-top: 0;
            padding-bottom: 0;
            margin-top: -1px;
        }
    }
}
</style>
